<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <include file="Public:header" />
  <script src="__PUBLIC__/myadmin/js/Chart.min.js"></script>
  <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <include file="Public:body_top" />

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-2 sidebar hidden-xs">
        <div class="menu">
          <dl>
            <dt><i class="cm-order"></i>订单管理</dt>
            <dd><a href="{:U('Orders/index')}">订单列表</a></dd>
            <dd class="active"><a href="{:U('Orders/order_count')}">订单统计</a></dd>
            <dd><a href="{:U('Settlements/amount_logs')}">结算记录</a></dd>
            <dd><a href="{:U('Settlements/amount_logs?types=2')}">返利提现记录</a></dd>
          </dl>
        </div>
      </div>
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <div class="main-hd">
          <h5>订单统计</h5>
        </div>
        <div class="main-bd">
          <div class="data-total">
            <ul>
              <li>
                <h3 class="data-red">{$data.num}</h3>
                <p>今日订单</p>
              </li>
              <li>
                <h3 class="data-green">￥{$data.amount}</h3>
                <p>今日营业额</p>
              </li>
              <!--<li>
                  <h3 class="data-blue">36</h3>
                  <p>已上架商品</p>
                </li>
                <li>
                  <h3 class="data-purple">6</h3>
                  <p>未完成订单</p>
                </li>-->
            </ul>
          </div>
          <div class="data-trend">
            <div class="data-trend-title">
              <h5><i class="cm-chart"></i>趋势统计</h5>
              <div class="data-chart-btns">
                <button id="week" class="active">近7天</button>
                <button id="month">近30天</button>
              </div>
            </div>
            <canvas id="datachart">您的浏览器不支持canvas，请升级浏览器</canvas>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

<script type="text/javascript">
  var WeekLabel = <?php echo $data['date_week']; ?>;
  var WeekDataOrder = <?php echo $data['recent_seven_days_orders']; ?>;
  var WeekDataTurnover = <?php echo $data['recent_seven_days_turnover']; ?>;

  var MonthLabel = <?php echo $data['date_month']; ?>;
  var MonthDataOrder = <?php echo $data['recent_thirty_days_orders']; ?>;
  var MonthDataTurnover = <?php echo $data['recent_thirty_days_turnover']; ?>;

  var lineChartData = {
    labels: WeekLabel,
    datasets: [{
      label: '订单数',
      borderColor: 'rgb(68, 181, 73)',
      backgroundColor: 'rgba(68, 181, 73,0.1)',
      pointBorderColor: 'rgb(68, 181, 73)',
      data: WeekDataOrder
    }, {

      label: '营业额',
      borderColor: 'rgb(94, 169, 248)',
      backgroundColor: 'rgba(94, 169, 248,0.1)',
      pointBorderColor: 'rgb(94, 169, 248)',
      data: WeekDataTurnover
    }]

  };
  $.each(lineChartData.datasets, function(i, dataset) {
    dataset.borderWidth = 2;
    dataset.pointBackgroundColor = 'rgb(255, 255, 255)';
    dataset.pointBorderWidth = 2;
  });
  window.onload = function() {
    var ctx = document.getElementById("datachart").getContext("2d");
    window.myLine = new Chart(ctx, {
      type: 'line',
      data: lineChartData,
      options: {
        responsive: true,
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: "关键指标增长趋势"
        }
      }
    });
  };

  $('#week').click(function() {
    $('#month').attr('class', '');
    $('#week').attr('class', 'active');
    lineChartData.labels = WeekLabel;
    lineChartData.datasets[0].data = WeekDataOrder;
    lineChartData.datasets[1].data = WeekDataTurnover;
    window.myLine.update();
  });

  $('#month').click(function() {
    $('#week').attr('class', '');
    $('#month').attr('class', 'active');
    lineChartData.labels = MonthLabel;
    lineChartData.datasets[0].data = MonthDataOrder;
    lineChartData.datasets[1].data = MonthDataTurnover;
    window.myLine.update();
  });
</script>


</html>